<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :defaults.sync="showColumn"
               :permission="permissionList"
               :page.sync="page"
               :before-open="beforeOpen"
               @sortable-change="sortableChange"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @refresh-change="refreshChange"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @filter="filterChange"
               @sort-change="sortChange"
               @row-dblclick="handleRowDBLClick"               
               @on-load="onLoad">
      <template slot-scope="scope" slot="menu">
        <el-button v-if="functionType == 'add'" type="text"
                   size="small"
                   icon="el-icon-sort"
                   @click.stop="addToSystemFunctionList(scope.row)">添加
        </el-button>
        <el-button v-if="functionType == 'version1'" type="text"
                   size="small"
                   icon="el-icon-sort"
                   @click.stop="changeSystemFunctionVersion(scope.row)">切换此版本
        </el-button>
      </template>
      <template slot-scope="scope" slot="assetFlag">
            <div>
              <el-tag v-if="scope.row.assetFlag == '0'" type="info">否</el-tag>
              <el-tag v-if="scope.row.assetFlag == '1'" type="success">是</el-tag>
            </div>
      </template>
    </avue-crud>
    <!-- 
      批量添加数据对话框
     -->
    <el-dialog title="批量导入" width='80%' :close-on-click-modal='false' :visible.sync="batchAddDialog">
      <el-tag>
        业务功能点编号，
        系统功能点编号，
        版本号，
        资产标志，
        系统编号，
        系统名称，
        功能点类型，
        业务功能点名称，
        系统功能点名称，
        系统功能点序号，
        是否改造标志，
        需求变更编号，<br>
        项目编号，
        项目名称，
        变更日期，
        标签信息，
        接口标志，
        接口编号，
        接口名称，
        连接方式，
        交互类型，
        服务方系统编号，<br>
        服务方系统名称，
        服务方系统状态，
        服务方系统功能点编号，
        服务方系统功能点名称，
        服务方接口编号，
        服务方接口名称，
      </el-tag>
      <el-input
        type="textarea"
        :autosize="{ minRows: 10, maxRows: 20}"
        placeholder="请直接从excel粘贴内容"
        v-model="importDataArea">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" id="copyBtn" @click="handleImport($event)" data-clipboard-target="#pathText">开始导入</el-button>
        <el-button size="small" @click="batchAddDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 历史记录 -->
    <update-history ref="historyRecord"></update-history>
  </basic-container>
</template>

<script>
import {exportBizApparchSystemFunctionExcel,saveOrUpdateBizApparchSystemFunction,saveOrUpdateBizApparchSystemFunctionList,saveBizApparchSystemFunction,saveBizApparchSystemFunctionList,deleteBizApparchSystemFunction,queryBizApparchSystemFunction,queryBizApparchSystemFunctionListPage,updateBizApparchSystemFunction,deleteBizApparchSystemFunctionList} from '@/api/biz/apparch/bizApparchSystemFunctionApi';
import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
export default {
  props: {
    systemFunctionData: {
      type: Object,
      default: ''
    },
    functionType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      //文件选择器的打开方式 add新增、edit修改、view 查看
      openType: 'edit',
      
      // 当前打开form对话框操作类型 
      operateType: 'add',
      
      //修改记录对话框
      historyDialog: false,
      //如果做流程表单 请将次开关设置为true，否则设置为false
      isFlow: true,
      flowArea: {},

      // 控制选择内部系统 还是外联系统
      selectSystemType: 'innerSystem',

      importDataArea: '',
      batchAddDialog: false,
      form: {},
      currentRow: {},
      selectionList: [],
      loading: true, 
      showColumn: [],
      option: {
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 125,
        dialogTop: '50',
        indexFixed:true, 
        stripe:true,
        calcHeight: 80,
        searchShow: true,
        searchBtn: true,
        searchMenuSpan: 12,
        tip: false,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        cancelBtn: true,
        printBtn:false,
        saveBtn: true,
        filterBtn:false,
        columnBtn: false,          
        menuWidth: 120,
        dialogMenuPosition: 'center',
        dialogDirection:'rtl',
        dialogType:'dialog',
        dialogFullscreen:false,
        dialogClickModal:false,
        dialogWidth: '70%',
        highlightCurrentRow:  true,
        column: [
          {
            label: '业务功能点编号',
            prop: 'bizFunctionNo', 
            type: 'input', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 125,
            multiple: false,
            span: 12,
            sortable: false,
            width:200
          }, 
          {
            label: '业务功能点名称',
            prop: 'bizFunctionName', 
            type: 'input', 
            search: true,
            searchMmultiple: false,
            searchLabelWidth: 125,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 50,
            overHidden: true,
            width:180
          },
          {
            label: '系统编号',
            prop: 'systemNo', 
            type: 'table', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: true,
            display: false,
            width:180
          },
          {
            label: '系统名称',
            prop: 'systemName', 
            type: 'input', 
            search: true,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 50,
            overHidden: true,
            width:180,
            rules: [{
              message: '请输入系统名称',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 50,
              message: '内容长度不能超过50字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '系统类型',
            prop: 'systemType', 
            type: 'radio', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: true,
            maxlength: 30,
            overHidden: true,
            value: 'innerSystem'
          },
          {
            label: '功能点类型',
            prop: 'functionType', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: true,
            maxlength: 30,
            overHidden: true,
           
          },
          {
            label: '系统功能点名称',
            prop: 'systemFunctionName', 
            type: 'input', 
            search: true,
            searchMmultiple: false,
            searchLabelWidth: 125,
            multiple: false,
            span: 24,
            sortable: false,
            hide: false,
            maxlength: 50,
            overHidden: true,
            rules: [{
              message: '请输入系统功能点名称',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 50,
              message: '内容长度不能超过50字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '功能点序号',
            prop: 'systemFunctionSeq', 
            type: 'number', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            overHidden: true,
            value: 0,
            maxRows: 100,
            minRows: 0,
            width: 100,
            rules: [{
              message: '请输入系统功能点序号',
              required:  false,
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '当前版本号',
            prop: 'newVersionNo', 
            type: 'input', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            hide: false,
            maxlength: 30,
            overHidden: true,
            width:110,
            rules: [{
              message: '请输入内容',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 30,
              message: '内容长度不能超过30字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          
          {
            label: '接口标志',
            prop: 'interfaceFlag', 
            type: 'switch', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 1,
            overHidden: true,
            rules: [{
              message: '请输入接口标志',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 1,
              message: '内容长度不能超过1字符',
              trigger: 'blur'
            }],
            dicData:[{
              label: '否',
              value: '0'
            }, 
            {
              label: '是',
              value: '1'
            }],
            change: ({value,column}) => {
              if(value == '1'){
                this.option.group[0].display = true;
              }
              else {
                this.option.group[0].display = false;
              }
            }
          }
        ]
      },
      data: [],
      // 请求参数区
      formPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: [],
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  computed: {
    ...mapGetters(['website','orgTree','genOrgTree','userInfo','permission','projectInfo']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.biz_apparch_sys_function_add, false),
        viewBtn: this.vaildData(this.permission.biz_apparch_sys_function_view, false),
        delBtn: this.vaildData(this.permission.biz_apparch_sys_function_delete, false),
        editBtn: this.vaildData(this.permission.biz_apparch_sys_function_edit, false),
        printBtn: this.vaildData(this.permission.biz_apparch_sys_function_print, false),
        searchBtn:this.vaildData(this.permission.biz_apparch_sys_function_search, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push({id : ele.id});
      });
      return ids;
    } 
  },
  methods: {
    /**
     * 切换版本
     */
    changeSystemFunctionVersion(row){
      this.$confirm('次操作将覆盖列表数据，确定要切换?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('changeSystemFunctionVersion',row);
      }).catch(() => {});
    },
    /**
     * 调用子组件添加记录
     */
    addToSystemFunctionList(row){
      this.$emit('addToSystemFunctionList',row);
    },
    
    /**
     * 加载列表数据
     */
    onLoad(page) {
      // 查看历史版本不显示需求和场景搜索条件
      if(this.functionType == 'version'){
        this.findObject(this.option.column, 'bizFunctionName').search = false;
        this.findObject(this.option.column, 'systemName').search = false;
        this.singleBody.systemFunctionNo = this.systemFunctionData.systemFunctionNo;
      }
      else {
        this.findObject(this.option.column, 'bizFunctionName').search = true;
        this.findObject(this.option.column, 'systemName').search = true;
      }
      this.loading = true;
      this.orderRules = {
        order: 'descending',
        prop: 'versionNo'
      }
      this.loading = true;
      this.reqParams =  {
        singleBody: this.singleBody,
        listBody: [{}],
        sqlCondition: this.conditions,
        orderRule: this.orderRules,
        currentPage: page.currentPage, 
        pageSize: page.pageSize
      }
      this.commonData = reqCommonMsg(this.reqParams)
      queryBizApparchSystemFunctionListPage(this.commonData).then(res => {
        const data = res.data.body;
        this.page.total = data.total;
        this.data = data.listBody;
        this.loading = false;
        this.selectionClear();
      }, error => {
        this.loading = false; 
      });
    },
    /**
     * 搜索重置
     */
    searchReset() {
      this.conditions =[];
      this.singleBody = {};
      this.onLoad(this.page);
    },
    /**
     * 搜索
     */
    searchChange(params, done) {
      this.singleBody = params
      this.page.currentPage = 1;
      this.onLoad(this.page);
      done();
    },
    refreshChange(){
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    /**
     * 处理批量删除
     */
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.reqParams.listBody = this.ids;
          this.commonData = reqCommonMsg(this.reqParams);
          return deleteBizApparchSystemFunctionList(this.commonData);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$refs.crud.toggleSelection();
        }).catch(() => {});
    },
   
    /**
     * 打开编辑、查询弹窗前查询记录
     */  
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        this.operateType = 'edit';        
        this.reqParams =  {
          singleBody: {
            id:this.form.id
          }
        }
        let commonData = reqCommonMsg(this.reqParams)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading'
        });
        queryBizApparchSystemFunction(commonData).then(res => {
          this.form = res.data.body.singleBody;
          this.form.labelInfo = JSON.parse(this.form.labelInfo);
          setTimeout(() => {
            if(this.form.systemType == 'outSystem'){
              this.form.outSystemNo = this.form.systemNo;
              this.form.systemNo = '';
            }
          }, 500);
          loading.close();
          done();
        }, error => {
          //this.$console.log(error);
          loading.close();
          done();
        });
      }
      if (['add'].includes(type)) {
        this.operateType = 'add';        
        done();
      }
    },
    /**
     * 翻页查询
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    /**
     * 更改每页条数
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    /**
     * 自定义查询条件
     */
    filterChange(result) {
      this.page.currentPage = 1;
      this.conditions = filterFormat(result)
      this.onLoad(this.page);
    },
    /**
     * 列表排序
     */
    sortChange(val){
      this.orderRules=val
      this.onLoad(this.page);
    },
   
    /**
     * 获取业务字典参数
     */
    async getBizDict() {
      
    },
    
    /**
     * 调用子组件方法查询历史
     */
    getHistoryRecord () {
      setTimeout(() => {
        this.$refs.historyRecord.getUpdateHistoryRecord(this.form.id);
      })
    },
  },
  created() {
    
  },
  mounted() {
    //获取业务字典
    // setTimeout(() => {
    //   this.getBizDict();
    // }, 1000);
  },
  watch: { 
    systemFunctionData: {
      handler (val) {
        this.singleBody={};
        this.onLoad(this.page);
      },
      deep: true
    },
    functionType:{
      handler (val) {
      },
      deep: true
    }
  }
};
</script>
<style>
.sortClass .avue-crud__menu{
   display: none !important;
 }
.sortClass .avue-crud__pagination{
   padding:5px !important;
   margin: 0px !important;
 }
</style>